<script src="https://fastly.jsdelivr.net/npm/three@0.145.0"></script>
<script src="https://fastly.jsdelivr.net/npm/three@0.145.0/examples/js/controls/OrbitControls.js"></script>
<script src="https://fastly.jsdelivr.net/npm/three@0.145.0/examples/js/loaders/GLTFLoader.js"></script>

<body></body>
<style>
    body {
        margin: 0;
    }
</style>
<script>
    setTimeout(function () {

        var scene = new THREE.Scene();

        var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.set(0, 10, 15);
        camera.lookAt(0, 0, 0);

        var renderer = new THREE.WebGLRenderer();

        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setClearColor(0xb9d3ff, 1);
        document.body.appendChild(renderer.domElement);

        new THREE.OrbitControls(camera, renderer.domElement);

        // 使用GLTF 模型加载器加载
        var gltfLoader = new THREE.GLTFLoader();
        gltfLoader.load("./data/MachineRoom/machineRoom.gltf", function (data) {

            // 其实就是把模型数据的模型对象（例如mesh）添加到场景中去
            scene.add(...data.scene.children);
        });

        // 渲染
        (function display() {
            renderer.render(scene, camera);
            requestAnimationFrame(function () {
                display();
            });
        })();

    }, 200);

</script>